<template>
    <div>
        <div class="div1">
            <div class="div2">
                <h4>新增办公用品</h4>
            </div>
            <div class="div3">
                <el-form :model="goods" inline size="mini" label-width="120px" :rules="rules" >
                    <el-form-item label="办公用品名称:" prop="collectionUnit">
                        <el-input v-model="goods.goodsName" style="width:250px" :disabled="flag"></el-input>
                    </el-form-item>
                    <el-form-item label="领用方式:"  prop="collectionUnit">
                        <el-select v-model="goods.goodsUserType"  style="width:250px" :disabled="flag">
                            <el-option
                             v-for="dict in dict.type.goods_user_type"
                             :key="dict.value"
                             :label="dict.label"
                             :value="dict.value"
                             >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属分类:"  prop="collectionUnit">
                        <el-select v-model="goods.goodsSortsNoid" style="width:250px" :disabled="flag" @change="changeSelect">
                            <el-option
                             v-for="i in goodsSortsList"
                             :key="i.value"
                             :label="i.goodsSortsName"
                             :value="i.goodsSortsId"
                             >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="规格类型:"  prop="collectionUnit">
                        <el-input v-model="goods.goodsType" style="width:250px" :disabled="flag"></el-input>
                    </el-form-item>
                    <el-form-item label="最低警示数量:">
                        <el-input v-model="goods.goodsLowestSize" style="width:250px" :disabled="flag"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编号:">
                        <el-input v-model="goods.goodsNumber" style="width:250px" :disabled="flag"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌:">
                        <el-input v-model="goods.goodsBrand" style="width:250px" :disabled="flag"></el-input>
                    </el-form-item>
                    <el-form-item label="领取地点:">
                        <el-input v-model="goods.goodsLocation" style="width:250px" :disabled="flag"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商:">
                        <el-input v-model="goods.goodsSupplier" style="width:250px" :disabled="flag"></el-input>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <el-input v-model="goods.goodsNodes" type="textarea" :disabled="flag"></el-input>
                    </el-form-item>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item class="bu1">
                            <el-button type="primary" @click="saveGoods()" :disabled="flag">确定</el-button>
                            <el-button @click="removal()">取消</el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { saveGoods , getByIdGoods } from "@/api/administration/goods/goods";
import {goodsSortsAllList} from "@/api/administration/goodsSorts/goodsSorts";
export default {
    name: 'RuoyiUiSave',
    dicts:['goods_user_type','goods_sorts_noid','goods_location'],
    data() {
        return {
            rules:{
                collectionUnit:[
                    { required: true,message:"必须填写该选项",trigger:'blur'}
                ], 
            },
            goods:{
                goodsUserType:'',
                goodsSortsNoid:"",
            },
            goodsSortsList:[],
            goodsLists:[],
            flag:false,
        };
    },

    mounted() {
        // 判断是否是详情页
        let goodsId = this.$route.query.goodsId;
        if(goodsId != undefined){
            this.getEditGoods();
        }
        this.goodsSortsLists();
        
    },

    methods: {
        // 添加办公物品
        saveGoods(){
            saveGoods(this.goods).then(rel=>{
                if(rel.code >= 200){
                    this.$modal.msgSuccess("保存成功");
                    this.goods = null;
                    this.$router.push("goods/index");
                }else{
                    this.$modal.msgSuccess("保存失败");
                    this.goods = null;
                    this.$router.push("goods/index");
                }
            })
        },
        // 获取回显修改办公物品///详情
        getEditGoods(){
            let goodsId = this.$route.query.goodsId;
            let flags = this.$route.query.flag;
            if(flags == 1){
                this.flag = true;
            }else{
                this.flag = false;
            }
            this.goods.goodsId = goodsId;
            getByIdGoods(this.goods).then(rel=>{
                this.goods = rel.data;
            })
        },
        //关联领取地点
        changeSelect(row){
            console.log(row);
            this.goodsSortsList.map((obj)=>{
                if(obj.goodsSortsId == row){
                    this.goods.goodsLocation = obj.goodsSortsLocation;
                }
            })
        },
        // 取消添加
        removal(){
            this.$router.push("goods/index");
            this.goods = null;
        },
        //获取办公物品分类
        goodsSortsLists(){
            goodsSortsAllList().then(rel=>{
                this.goodsSortsList = rel.data;
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.div1{
    // border: 1px red solid;
    width: 1100px;
    margin: 0 auto;
}
.bu1{
    margin-left: 550px;
}
</style>